import React from 'react';
import {StyleSheet, Text, View,Image, TouchableHighlight} from 'react-native';
import {px2dp} from '../../utils/DisplayUtils'
export default class AppListItem extends React.Component {

  AppListItem(props) {
    this.props = props;
    
  }

  



  
  /**
   *
   *
   * @memberof AppListItem
   */
  clickButton=()=>{
    this.props.itemClick(this.props.item);
  }

  getButtonTitle(){

    // console.log("getButtonTitle", "" + this.props.item.appStatus)

    if(this.props.item.appStatus === 0){
      return '下载'
    }else if(this.props.item.appStatus === 1){
      return '启动'
    }else if(this.props.item.appStatus === 2){
      return '更新'
    }
  }


  /**
   *
   *
   * @return {*} 
   * @memberof AppListIt
   * 
   * 
   * em
   */
  render() {
   
    var baseImg='data:image/png;base64,' + this.props.item.appLogo;
    return (
      <View style={styles.container}>

            <TouchableHighlight onPress={()=>{

            }} >
              <View style={styles.contentBg}>
                {/* 应用图标 */}
                <View style={styles.appIconBg}>

                    <Image style = {styles.appIcon} source={{uri: baseImg}}></Image>                
                </View>

                {/* 应用内容 */}
                <View style={styles.appItemBg}>

                    <Text style={styles.nameText}>{this.props.item.appName}</Text>
                    <Text style={styles.nameText}>{this.props.item.appDesc}</Text>

                </View>

                {/* 操作按钮 */}
                <View style={styles.actionBg}>
                    <TouchableHighlight onPress={this.clickButton} style = {styles.button}>
                        <View >
                            <Text style={styles.buttonText}>{this.getButtonTitle()} </Text>
                        </View>
                    </TouchableHighlight>

                </View>
                </View>
            </TouchableHighlight>
       
      </View>
    );
  }
}


/** 样式表*/
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    marginLeft: 10,
    marginRight: 10,
    marginBottom: 2,
    justifyContent: 'center',
    height: 80,
    borderRadius:8,
    borderColor:"#efefef",
    borderWidth: 1,
    backgroundColor: "#ffffff"
  },
  contentBg:{
    flexDirection: 'row',
    width: px2dp(355),
    justifyContent: 'flex-start',
    alignItems: 'center',
    // backgroundColor:"#ff0000"

  },
  appIconBg:{
    marginLeft: 10,
    flexDirection: 'row',
    width: 60,
    height: 60,
    alignItems: 'center',
    justifyContent: 'center'
  },

  appIcon:{

    width: 50,
    height: 50

  },
  appItemBg:{
    flex: 1,
    height: 60,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems:'flex-start',
    // backgroundColor:"#0000ff"

  },

  actionBg:{
    width: 80,
    height: 60,
    justifyContent: 'center',
    alignItems: "center"
  },
  nameText:{
    marginLeft: 12
  },

  button: {
    alignItems: "center",
    backgroundColor: "#0081cc",
   
    borderRadius:4,
    padding: 10,
    width: 60
  },

  buttonText:{
    color:'#ffffff',

  },
});
